<template>

  <div class='container'>
<el-card class="box-card">
  <div>目前仅支持学科和关键字查询</div>
  <div class="clearfix">
       <el-button style="float: right" type="success" icon="el-icon-edit" size='small' @click="addSt">新增试题</el-button>
  </div>
  <qsestionsChoiceForm @changenewtableList='changenewtableList' @clearQuery='clearQuery'></qsestionsChoiceForm>
   <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="全部" name="first"> <qusetionsChoiceTable  :newtableList='newtableList' :newcount='newcount' @changePage='changePage' @changesize='changesize'></qusetionsChoiceTable></el-tab-pane>
    <el-tab-pane label="待审核" name="second"> <qusetionsChoiceTable :newtableList='newtableList' :newcount='newcount' @changePage='changePage' @changesize='changesize'></qusetionsChoiceTable></el-tab-pane>
    <el-tab-pane label="已审核" name="third"> <qusetionsChoiceTable  :newtableList='newtableList' :newcount='newcount' @changePage='changePage' @changesize='changesize'></qusetionsChoiceTable></el-tab-pane>
    <el-tab-pane label="已拒绝" name="fourth"> <qusetionsChoiceTable  :newtableList='newtableList' :newcount='newcount' @changePage='changePage' @changesize='changesize'></qusetionsChoiceTable></el-tab-pane>
  </el-tabs>
</el-card>

  </div>
</template>

<script>

import { choice } from '@/api/hmmm/questions.js'
import qsestionsChoiceForm from './questionsChoiceForm'
import qusetionsChoiceTable from './qusetionChoiceTable'
export default {
  components: {
    qsestionsChoiceForm,
    qusetionsChoiceTable
  },
  data () {
    return {
      activeName: 'first',
      newtableList: [],
      newcount: 0,
      isquery: false,
      curQuery: {},
      page: 1,
      pagesize: 10
    }
  },
  methods: {
    // 分页逻辑，更新渲染数据在这里
    handleClick (tab, event) {
      let index = tab.index - 1
      this.index = index
      if (this.isquery) {
        if (index === -1) {
          index = ''
          choice({ page: this.page, pagesize: this.pagesize, ...this.curQuery }).then(res => {
            this.newtableList = res.data.items
            this.newcount = res.data.counts
          })
        } else {
          choice({ page: this.page, pagesize: this.pagesize, chkState: index, ...this.curQuery }).then(res => {
            this.newtableList = res.data.items
            this.newcount = res.data.counts
          })
        }
      } else {
        if (index === -1) {
          index = ''
          choice({ page: this.page, pagesize: this.pagesize }).then(res => {
            this.newtableList = res.data.items
            this.newcount = res.data.counts
          })
        } else {
          choice({ page: this.page, pagesize: this.pagesize, chkState: index }).then(res => {
            this.newtableList = res.data.items
            this.newcount = res.data.counts
          })
        }
      }
    },
    // 表单查询按钮查询结果
    changenewtableList (data) {
      this.newtableList = data[0]
      this.isquery = true
      this.curQuery = data[1]
    },
    // 清除查询状态，恢复原始数据
    clearQuery () {
      this.isquery = false
      this.curQuery = {}
      choice({ page: 1, pagesize: this.pagesize }).then(res => {
        this.newtableList = res.data.items
        this.newcount = res.data.counts
      })
    },
    // 页数改变
    changePage (val) {
      this.page = val
    },
    // 每页条数改变
    changesize (val) {
      this.pagesize = val
    },
    addSt () {
      this.$router.push({
        path: '/questions/new'
      })
    }
  }

}
</script>

<style scoped lang='scss'>

.container{
    padding: 20px 20px 0 20px;
}
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;

  }

</style>
